import React from "react";
import Confirm from "@/common/Modal/Confirm";
import JTable from "@/common/Table";
import {homeBannerCol} from "@/js/columns";
import {Form, Input, Modal} from "antd";
import {BannerControlContainer} from "@/component/Mine/AdminConsole/BannerControl/style";
import {getHomeBanners} from "@/api/SysHomeBanner";

class BannerControl extends React.Component {
    form = React.createRef();
    constructor(props) {
        super(props);
        this.handleLoad = this.handleLoad.bind(this);
        this.handleDelete = this.handleDelete.bind(this);
        this.handleSave = this.handleSave.bind(this);
        this.handleClickSave = this.handleClickSave.bind(this);
        this.init = this.init.bind(this);
        this.state = {
            confirmVisible:false,
            selectId:null,
            data:[],
            formTitle:null,
            ModalVisible:false,
            formData:{
                title:null,
                description:null,
                coverFile:null,
                link:null,
                order:null,
                isInternal:null
            },

        }
    }
    handleLoad(params){
        getHomeBanners(params)
            .then(({success, data}) => {
                if (success) {
                    this.setState({
                        data
                    })
                }
        })
    }

    handleClickSave(){

    }

    handleDelete(){

    }

    handleSave(){

    }

    init(){

    }

    render() {
        return <BannerControlContainer>
            {/* 单选删除弹窗 */}
            <Confirm visible={this.state.confirmVisible}
                     dataSize={1}
                     onOk={() => this.handleDelete({ids: [this.state.selectId]})}
                     onCancel={() => this.setState({confirmVisible: false})}
            />
            <JTable ref={"childTable"}
                    data={this.state.data}
                    columns={homeBannerCol(this)}
                    onReload={this.handleLoad}
                    onDelete={this.handleDelete}
                    defaultSize={this.state.size}
                    clickSaveCallback={this.handleClickSave}
            />
            <Modal
                forceRender={true}
                title={this.state.formTitle}
                visible={this.state.ModalVisible}
                onOk={this.handleSave}
                onCancel={this.init}
            >
                <Form
                    ref={this.form}
                    labelCol={{span: 4}}
                    wrapperCol={{span: 14}}
                    layout="horizontal"
                >
                    <Form.Item label={"标题"}
                               name={'title'}
                               rules={[{required: true, message: '标题不能为空！'}]}
                    >
                        <Input onChange={(e) => this.handleChangeVal('title', e)}
                               value={this.state.formData.title}
                               maxLength={50}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"封面图"}
                               name={'coverFile'}>
                        <Input onChange={(e) => this.handleChangeVal('coverFile', e)}
                               value={this.state.formData.coverFile}
                               maxLength={100}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"页面跳转"}
                               name={'link'}>
                        <Input onChange={(e) => this.handleChangeVal('link', e)}
                               value={this.state.formData.link}
                               maxLength={100}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"是否是内部页面跳转链接"}
                               name={'isInternal'}>
                        <Input onChange={(e) => this.handleChangeVal('isInternal', e)}
                               value={this.state.formData.isInternal}
                               maxLength={100}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"排序/权重"}
                               name={'order'}>
                        <Input onChange={(e) => this.handleChangeVal('order', e)}
                               value={this.state.formData.order}
                               maxLength={100}
                               allowClear/>
                    </Form.Item>
                    <Form.Item label={"描述"}
                               name={'description'}>
                        <Input.TextArea onChange={(e) => this.handleChangeVal('description', e)}
                                        value={this.state.formData.description}
                                        maxLength={255}
                                        allowClear/>
                    </Form.Item>
                </Form>
            </Modal>
        </BannerControlContainer>
    }
}
export default BannerControl;
